<template>
  <div class="page-login">
    <!-- 
      ref="myForm"
        选项式：  this.$refs.myForm 获取
        组合式：  定义一个同名的 ref 数据，直接通过这个数据就可以获取

        注意事项：必须在组件挂载完成之后才能获取得到
     -->
    <!-- <button ref="myButton">点我</button> -->
    <el-form ref="myForm" class="page-login__form" label-width="80px" :model="model" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="model.username" />
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="model.password" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="handleLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

// 表单数据
const model = reactive({
  username: '',
  password: ''
})

// 表单规则
const rules = {
  username: [{ required: true, message: '用户名必须输入' }],
  password: [{ required: true }]
}

const myForm = ref()
const myButton = ref()

// console.log('===', myButton.value) // undefined
// onMounted(() => {
//   console.log('===', myButton.value) //
// })

/**
 * 处理登录
 */
async function handleLogin() {
  // 1. 手动控制表单走一次校验，调用表单组件内部定义好的 validate 方法
  //      获取到表单组件的实例对象
  //         ref 属性，标记元素，后续可以获取到相应的内容
  //            1. 标记的普通元素，后续获取的是该普通元素的DOM对象
  //            2. 标记的组件，后续获取的是该组件的实例对象
  // console.log('handleLogin', myForm.value)
  // console.log('myButton', myButton.value)
  // 一、通过回调函数的形式来获取是否校验成功
  // myForm.value.validate((isOk: boolean) => {
  //   // 回调函数中，isOk 是校验是否通过的标识
  //   if (isOk) {
  //     // 写后续的逻辑代码
  //     alert('登录成功')
  //   }
  // })
  // 二、使用 async await 来获取是否校验成功, 校验成功代码会往后执行，否则抛出异常
  await myForm.value.validate()
  alert('登录成功')
}
</script>

<style lang="scss" scoped>
.page-login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #ccc;

  &__form {
    padding: 30px;
    width: 300px;
    border: 1px solid #000;
    background-color: #fff;
  }
}
</style>
